import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import Modal from 'src/component/Modal';
// import { TwoStepVerificationForm } from 'src/model/Form';
import style from './ConfirmReceiptModal.module.scss';

type TwoStepVerificationForm = any

type Props = {
  open: boolean;
  onClose: () => void;
  onSubmit: (code: string) => void;
};

const ConfirmReceiptModal = ({ open, onClose, onSubmit }: Props) => {
  const { t } = useTranslation();
  const methods = useForm<TwoStepVerificationForm>();

  const handleSubmit = (data: TwoStepVerificationForm) => {
    onClose();
    onSubmit(data.code);
    methods.reset();
  };

  return (
    <Modal open={open} handleClose={onClose}>
      <div>
        <div className={style.heading}>查收放币</div>
        <div className={style.subHeading}>如果买家已完成付款，请进行放币。放币一旦完成，系统将把加密货币归予买家。</div>
        <Form methods={methods} onSubmit={handleSubmit} className={style.form}>
          {/* <FormInput label="二步骤验证码" name="code" required /> */}
          <div className={style.buttons}>
            <Button appearance="secondary" onClick={onClose} type="button">
              取消
            </Button>
            <Button type="submit">送出</Button>
          </div>
        </Form>
      </div>
    </Modal>
  );
};

export default ConfirmReceiptModal;
